<template>
  <div class="ar-table" ref="resizeContext">
    <header>
      <!-- <el-button round @click="dialogConfirmVisible = true">批量确认</el-button>
    <el-button round @click="dialogTransferVisible = true">批量转让</el-button>
    <el-button round @click="dialogWithdrawVisible = true">一键批量变现</el-button> -->
    </header>
    <!-- <dialog-confirm :visible-p.sync="dialogConfirmVisible" :multiple-selection-p="multipleSelection"></dialog-confirm> -->
    <!-- <dialog-withdraw :visible-p.sync="dialogWithdrawVisible" :multiple-selection-p="multipleSelection" :options="Options"></dialog-withdraw> -->
    <!-- 详情 -->
    <dialog-info :visible-p.sync="dialogInfoVisible" :details-p="details" ></dialog-info>
    <!-- 还款 -->
    <dialog-repay :visible-p.sync="dialogRepayVisible" :details-p="details" ></dialog-repay>
    <section>
      <el-table id="tb" :data="dataTable" v-loading.fullscreen="dataLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"  :summary-method="sumHandle([6])" border style="width: 100%"
        @selection-change="handleSelectionChange" :row-class-name="tableRowClassName" @expand-change="expendhandle" @header-dragend="widthHandle" @mousedown.native="mouseDown">
        <el-table-column type="expand" fixed>
          <template slot-scope="props">
            <el-table :data="props.row.tableData" border style="width: 100%" :show-header="false" :row-class-name="getPendedColor">
              <el-table-column width="48">
              </el-table-column>
              <el-table-column align="center" prop="masterChainId" :width="widthArr.masterChainId" :formatter="nullDealWith">
              </el-table-column>
              <el-table-column align="center" prop="billId" :width="widthArr.billId" :formatter="nullDealWith">
              </el-table-column>
              <el-table-column align="center" prop="companyName" :width="widthArr.companyName" :formatter="nullDealWith">
              </el-table-column>
              <el-table-column align="center" prop="custFromName" :width="widthArr.custFromName" :formatter="nullDealWith">
              </el-table-column>
              <el-table-column align="right" header-align="center" prop="billBookAmt" :width="widthArr.billBookAmt" :formatter="regexNum">
              </el-table-column>
              <el-table-column align="center" prop="currencyDesc" :width="widthArr.currencyDesc" :formatter="nullDealWith">
              </el-table-column>
              <el-table-column align="center" prop="repaymentType" :width="widthArr.repaymentType" :formatter="nullDealWith">
              </el-table-column>
              <el-table-column align="center" prop="fineGraceDays" :width="widthArr.fineGraceDays" :formatter="nullDealWith">
              </el-table-column>
              <el-table-column align="right" header-align="center" prop="payPrincipalAmt" :width="widthArr.payPrincipalAmt" :formatter="regexNum">
              </el-table-column>
              <el-table-column align="right" header-align="center" prop="payInterestAmt" :width="widthArr.payInterestAmt" :formatter="regexNum">
              </el-table-column>
              <el-table-column align="right" header-align="center" prop="payServiceAmt" :width="widthArr.payServiceAmt" :formatter="regexNum">
              </el-table-column>
              <el-table-column align="right" header-align="center" prop="payFineAmt" :width="widthArr.payFineAmt" :formatter="regexNum">
              </el-table-column>
              <el-table-column align="center" prop="payFineDays" :width="widthArr.payFineDays" :formatter="nullDealWith">
              </el-table-column>
              <el-table-column align="right" header-align="center" prop="prepayServiceAmt" :width="widthArr.prepayServiceAmt" :formatter="regexNum">
              </el-table-column>
              <el-table-column align="right" header-align="center" prop="payAmt" :width="widthArr.payAmt" :formatter="regexNum">
              </el-table-column>
              <el-table-column align="center" prop="billPayDate" :width="widthArr.billPayDate" :formatter="dateFormat">
              </el-table-column>
              <el-table-column align="center" prop="loanDate" :width="widthArr.loanDate" :formatter="dateFormat">
              </el-table-column>
              <el-table-column align="center" prop="periodPayDate" :width="widthArr.periodPayDate" :formatter="dateFormat">
              </el-table-column>
              <el-table-column align="center" prop="billPayStatus" :width="widthArr.billPayStatus">
                <template slot-scope="scope">
                  <el-tooltip class="item" effect="light" placement="top-start">
                      <div slot="content" class="status-tooltip">
                        <ul>
                          <li :style="scope.row.signStatusId===0?'color:red':''">会计确认</li><span>-></span>
                          <li :style="scope.row.signStatusId===1?'color:red':''">财务确认</li><span>-></span>
                          <li :style="scope.row.signStatusId===2?'color:red':''">财务已付款</li><span>-></span>
                          <li :style="scope.row.signStatusId===3?'color:red':''">付款单确认</li>
                        </ul>
                        <ul>
                          <li :style="scope.row.signStatusId===0?'color:red':''">{{scope.row.signStatusId===0&&scope.row.signStatusName?`(${scope.row.signStatusName})`: ''}}</li>
                          <li :style="scope.row.signStatusId===1?'color:red':''">{{scope.row.signStatusId===1&&scope.row.signStatusName?`(${scope.row.signStatusName})`: ''}}</li>
                          <li :style="scope.row.signStatusId===2?'color:red':''">{{scope.row.signStatusId===2&&scope.row.signStatusName?`(${scope.row.signStatusName})`: ''}}</li>
                          <li :style="scope.row.signStatusId===3?'color:red':''">{{scope.row.signStatusId===3&&scope.row.signStatusName?`(${scope.row.signStatusName})`: ''}}</li>
                        </ul>
                      </div>
                        <em>{{scope.row.billPayStatus}}</em>
                  </el-tooltip>
                  <!-- <el-tooltip class="item" effect="dark" content="会计确认->财务确认->财务已付款->付款单确认" placement="top">
                    <span>{{scope.row.billPayStatus}}</span>
                  </el-tooltip> -->
                </template>
              </el-table-column>
              <el-table-column align="center" width='80px'>
                <template slot-scope="scope">
                  <el-button size="mini" type="text" v-if="scope.row.isShowRepayButton" @click="handleRepay(scope.$index, props.row, scope.row)">还款</el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column align="center" label="AR单号" fixed  prop="masterChainId" width="150">
        </el-table-column>
        <el-table-column align="center" label="结报单号" prop="billId" width="150">
        </el-table-column>
        <el-table-column align="center" label="付款单位" prop="companyName" width="150">
        </el-table-column>
        <el-table-column align="center" label="贴现客户" prop="custFromName" width="150">
        </el-table-column>
        <el-table-column align="right" header-align="center" label="贴现放款金额" prop="billBookAmt" width="150" :formatter="regexNum">
        </el-table-column>
        <el-table-column align="center" label="币别" prop="currencyDesc" width="80">
        </el-table-column>
        <el-table-column align="center" label="还款方式" prop="repaymentType" width="80">
        </el-table-column>
        <el-table-column align="center" label="宽容天数" prop="fineGraceDays" :formatter="nullDealWith">
        </el-table-column>
        <el-table-column align="right" header-align="center" label="还款本金" prop="payPrincipalAmt" width="150" :formatter="regexNum">
        </el-table-column>
        <el-table-column align="right" header-align="center" label="还款利息" prop="payInterestAmt" width="150" :formatter="regexNum">
        </el-table-column>
        <el-table-column align="right" header-align="center" label="服务费" prop="payServiceAmt" width="150" :formatter="regexNum">
        </el-table-column>
        <el-table-column align="right" header-align="center" label="还款罚息" prop="payFineAmt" width="150" :formatter="regexNum">
        </el-table-column>
        <el-table-column align="center" label="罚息天数" prop="payFineDays" :formatter="nullDealWith">
        </el-table-column>
        <el-table-column align="right" header-align="center" label="提前还款手续费" prop="prepayServiceAmt" width="150" :formatter="regexNum">
        </el-table-column>
        <el-table-column align="right" header-align="center" label="还款总计" prop="payAmt" width="150" :formatter="regexNum">
        </el-table-column>
        <el-table-column align="center" label="票据到期日" prop="billPayDate" :formatter="dateFormat" width="120">
        </el-table-column>
        <el-table-column align="center" label="出借日期" prop="loanDate" :formatter="dateFormat" width="120">
        </el-table-column>
        <el-table-column align="center" label="预计还款日期" prop="periodPayDate" :formatter="dateFormat" width="120">
        </el-table-column>
        <el-table-column align="center" width="80" label="结报状态">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="light" placement="top-start">
                      <div slot="content" class="status-tooltip">
                        <ul>
                          <li :style="scope.row.signStatusId===0?'color:red':''">会计确认</li><span>-></span>
                          <li :style="scope.row.signStatusId===1?'color:red':''">财务确认</li><span>-></span>
                          <li :style="scope.row.signStatusId===2?'color:red':''">财务已付款</li><span>-></span>
                          <li :style="scope.row.signStatusId===3?'color:red':''">付款单确认</li>
                        </ul>
                        <ul>
                          <li :style="scope.row.signStatusId===0?'color:red':''">{{scope.row.signStatusId===0&&scope.row.signStatusName?`(${scope.row.signStatusName})`: ''}}</li>
                          <li :style="scope.row.signStatusId===1?'color:red':''">{{scope.row.signStatusId===1&&scope.row.signStatusName?`(${scope.row.signStatusName})`: ''}}</li>
                          <li :style="scope.row.signStatusId===2?'color:red':''">{{scope.row.signStatusId===2&&scope.row.signStatusName?`(${scope.row.signStatusName})`: ''}}</li>
                          <li :style="scope.row.signStatusId===3?'color:red':''">{{scope.row.signStatusId===3&&scope.row.signStatusName?`(${scope.row.signStatusName})`: ''}}</li>
                        </ul>
                      </div>
                        <em>{{scope.row.billPayStatus}}</em>
                  </el-tooltip>
            <!-- <el-tooltip class="item" effect="dark" content="会计确认->财务确认->财务已付款->付款单确认" placement="top">
              <span>{{scope.row.billPayStatus}}</span>
            </el-tooltip> -->
          </template>
        </el-table-column>
        <el-table-column align="center" header-align="center" label="操作" width='80' class-name="" fixed="right" :resizable="false">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleInfo(scope.$index, scope.row)">详情</el-button>
            <!-- <el-dropdown>
              <el-button type="primary">
                更多菜单<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item><el-button size="mini" type="text" @click="handleTransfer(scope.$index, scope.row)">转让</el-button></el-dropdown-item>
                <el-dropdown-item><el-button size="mini" type="text" @click="handleCancle(scope.$index, scope.row)">取消</el-button></el-dropdown-item>
                <el-dropdown-item><el-button size="mini" type="text" @click="handleApply(scope.$index, scope.row)">贴现审核申请</el-button></el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown> -->
            </template>
        </el-table-column>
      </el-table>
    </section>
  </div>
</template>
<style scoped lang="scss">
@import "@/assets/css/_dialog.scss";
header {
  text-align: right;
}
// 更多菜单样式
.el-dropdown {
  margin-left: 20px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #033c81;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.el-dropdown-menu.el-popper {
  li:not(:first-of-type) {
    margin-top: 10px;
  }
  .full-width {
    width: 100%;
  }
}
</style>

<script>
import TableMixIn from '@/mixins/suplier/Ar/Table'
import Common from '@/mixins/common/common' // fresh刷新数据函数
// import Width from '@/mixins/Fund/width' // 宽度
export default {
  props: ['dataLoading', 'dataTable'],
  mixins: [TableMixIn, Common],
  components: {
    'dialog-info': () =>
      import(/* webpackChunkName: 'Dialog' */ '@/components/Fund/Work/Loaned/DialogInfoLoaned'),
    'dialog-repay': () =>
      import(/* webpackChunkName: 'Dialog' */ '@/components/Fund/Work/Loaned/DialogRepay')
  },
  data () {
    return {
      dialogRepayVisible: false, // 控制贴现窗
      dialogInfoVisible: false,
      multipleSelection: [], // 选择的数据
      details: {}, // 详情数据
      widthArr: {
        masterChainId: '150',
        billId: '150',
        companyName: '150',
        custFromName: '150',
        billBookAmt: '150',
        currencyDesc: '80',
        repaymentType: '80',
        fineGraceDays: '',
        payPrincipalAmt: '150',
        payInterestAmt: '150',
        payServiceAmt: '150',
        payFineAmt: '150',
        payFineDays: '',
        prepayServiceAmt: '150',
        payAmt: '150',
        billPayDate: '120',
        loanDate: '120',
        periodPayDate: '120',
        billPayStatus: ''
      }
    }
  },
  methods: {
    handleSelectionChange (val) {
      this.multipleSelection = val
      console.log(this.multipleSelection)
    },
    // 详情
    handleInfo: handleInfo,
    // 还款
    handleRepay: handleRepay
  }
}
/**
 * 详情
 */
function handleInfo (idx, val) {
  // 引入mixins/common.js中getLoanDetail其中包含有加载loading
  this.getLoanDetail('/loan2/queryLoanInfo.do', { masterChainId: val.masterChainId }).then(res => {
    if (res) {
      this.details = res
      this.dialogInfoVisible = true
    }
  })
}
/**
 * 还款
 */
async function handleRepay (idx, val1, val2) {
  // 获取数据
  // 引入mixins/common.js中getLoanDetail其中包含有加载loading
  let param = {
    masterChainId: val1.masterChainId,
    periodNo: val2.periodNo
  }
  let param2 = {
    factoringCustId: val1.factoringCustId, masterChainId: val1.masterChainId
  }
  // 显示加载图标
  const loading = this.$loading({
    lock: true,
    text: 'Loading',
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.7)'
  })
  try {
    if (new Date(val2.periodPayDate) > new Date()) {
      let [res1, res2] = await Promise.all([this.axios.post('/loanQuery/queryLoanRepayInfo.do', param), this.axios.post('/loanQuery/prepaySettleLoanTrial.do', param2)])
      // 获取提前还清还款的接口
      loading.close()
      if (res1.data.status) {
        this.details = Object.assign({}, res1.data.data)
      } else {
        this.$message({
          showClose: true,
          message: res1.data.msg,
          type: 'error'
        })
        return false
      }
      if (res2.data.status) {
        this.details = Object.assign(this.details, res2.data.data)
      } else {
        this.$message({
          showClose: true,
          message: res2.data.msg,
          type: 'error'
        })
        return false
      }
      if (res1.data.status && res2.data.status) {
        this.dialogRepayVisible = true
      }
    } else {
      let res1 = await this.axios.post('/loanQuery/queryLoanRepayInfo.do', param)
      // 获取提前还清还款的接口
      loading.close()
      if (res1.data.status) {
        this.details = Object.assign({}, res1.data.data)
      } else {
        this.$message({
          showClose: true,
          message: res1.data.msg,
          type: 'error'
        })
        return false
      }
      if (res1.data.status) {
        this.dialogRepayVisible = true
      }
    }
  } catch (error) {
    loading.close()
    console.log('系统异常', error)
    this.$alert(`系统异常,请联系管理员!`, '系统提示', {
      confirmButtonText: '确定',
      callback: action => {
      }
    })
  }
}
</script>
